<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画-放大</title>
    <style>
        .content{
            border: 1px solid #ccc;
            /* 高度不加也可以，可以由图片撑起来 */
            height: 300px;
            width: 300px;
            margin: 0 auto;
            /* 放大后超出盒子的部分隐藏掉 */
            overflow: hidden;
        }
        .content:hover{
            /* border: 10px solid red; */
            box-shadow: 3px 3px 5px #666;
            transition-property: border;
            transition-duration: 3s;
            /* 光标悬浮，图片变大 */
            /* width: 350px;
            height: 350px; */
        }
        img{
            height: 100%;
            width: 100%;

            /* 不用动画，使用过渡 */
            transition-property: transform;
            transition-duration: 1s;
            transition-timing-function: linear;

        }
        .content:hover > img{
            transform: scale(1.2);

            /* 引用动画 */
            /* animation-name: enlarge;
            animation-duration: 5s; */  
        }
        /* 加动画，让其缓慢的变化 */
        /* @keyframes enlarge{
            from{
                transform: scale(1);
            }
            to{
                transform: scale(2);
            }
        } */

    </style>
</head>
<body>
    <div class="content">
        <img src="./img/02.jpg" alt="">
    </div>
</body>
</html>